<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20" class="topProcess">
        <el-col :span="12" :offset="6">
          <el-steps :active="list.status + 1">
            <el-step title="待付款" :description="list.createTime"></el-step>
            <el-step title="待发货" :description="list.paymenTime"></el-step>
            <el-step title="已发货" :description="list.modifyTime"></el-step>
            <el-step title="已完成" :description="list.receiveTime"></el-step>
            <el-step title="已关闭" :description="list.finishTime"></el-step>
          </el-steps>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="orderMesTop">
        <el-col :span="12" :offset="0">
          <div class="orderMesDiv">
            <span class="orderMesTop-span">订单信息:</span>
            <el-button v-if="list.status == 0" type="warning">待付款</el-button>
            <el-button v-if="list.status == 1" type="danger">待发货</el-button>
            <el-button v-if="list.status == 2" type="warning">已发货</el-button>
            <el-button v-if="list.status == 3" type="success">已完成</el-button>
            <el-button v-if="list.status == 4" type="info">已关闭</el-button>
            <el-button v-if="list.status == 5" style="background: #e9eae9"
              >无效订单</el-button
            >
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="orderMes">
        <el-col :span="6"> 订单金额: {{ list.totalAmount }} </el-col>
        <el-col :span="6"> 订单编号: {{ list.orderSn }}</el-col>
        <el-col :span="6"> 用户账号: {{ list.memberUsername }}</el-col>
        <el-col :span="6"> 备注: {{ list.payAmount }}</el-col>
      </el-row>
      <el-row :gutter="20" class="mesBottom">
        <el-col :span="6"> 下单时间: {{ list.createTime }}</el-col>
        <el-col :span="6"> 付款时间: {{ list.paymentTime }}</el-col>
        <el-col :span="6"> 发货时间: {{ list.deliveryTime }}</el-col>
        <el-col :span="6"> 收货时间: {{ list.receiveTime }}</el-col>
      </el-row>

      <el-row :gutter="20" class="orderMesTop">
        <el-col :span="12" :offset="0">
          <div class="orderMesDiv">
            <span class="orderMesTop-span">收获人信息:</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="orderMes">
        <el-col :span="6"> 收货人: {{ list.receiverName }}</el-col>
        <el-col :span="6"> 用户姓名: {{ list.memberUsername }}</el-col>
        <el-col :span="6"> 手机号码: {{ list.receiverPhone }}</el-col>
        <el-col :span="6"> 邮政编码: {{ list.receiverPostCode }}</el-col>
      </el-row>
      <el-row :gutter="20" class="mesBottom">
        <el-col :span="6"> 城市: {{ list.receiverPostCode }}</el-col>
        <el-col :span="6">
          详细地址: {{ list.receiverProvince + list.receiverCity }}</el-col
        >
      </el-row>

      <el-row :gutter="20" class="orderMesTop">
        <el-col :span="12" :offset="0">
          <div class="orderMesDiv">
            <span class="orderMesTop-span">商品信息:</span>
          </div>
        </el-col>
      </el-row>

      <el-table :data="tableShowData" border style="width: 100%">
        <el-table-column prop="productName" label="商品名称" align="center">
        </el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <img class="img" :src="scope.row.productPic" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="是否退货" align="center">
          <template slot-scope="scope">
            {{ scope.row.isReturn ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="productBrand" label="品牌" align="center">
        </el-table-column>
        <el-table-column prop="productPrice" label="价格" align="center">
        </el-table-column>
        <el-table-column prop="productQuantity" label="商品数量" align="center">
        </el-table-column>
        <el-table-column prop="totalPrice" label="小计" align="center">
        </el-table-column>
      </el-table>

      <el-row :gutter="20" class="orderMesTop">
        <el-col :span="12" :offset="0">
          <div class="orderMesDiv">
            <span class="orderMesTop-span">费用信息:</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="orderMes">
        <el-col :span="6"> 运费金额: 0</el-col>
        <el-col :span="6"> 订单总金额: {{ orderTotalPrice }}</el-col>
        <el-col :span="6"> 实际金额: {{ realAmount }}</el-col>
        <el-col :span="6"> 促销优惠金额: 0</el-col>
      </el-row>

      <el-form
        :model="formList"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
        v-if="list.status == 1"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="选择物流公司" prop="deliveryCompany">
              <el-select
                v-model="formList.deliveryCompany"
                placeholder="请选择物流公司"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="填写单号" prop="deliverySn">
              <el-input v-model="formList.deliverySn"></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="8">
            <el-button type="primary" @click="onSubmit">立即发货</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="20" class="orderMesTop" v-if="list.status == 2 || list.status == 3 ||list.status == 4">
        <el-col :span="20" :offset="0">
          <div class="orderMesDiv">
            <span class="orderMesTop-span">物流信息:{{list.deliveryCompany + ":" + list.deliverySn}}</span>
          </div>

          <el-table :data="address" border style="width: 100%">
            <el-table-column prop="createTime" label="时间" align="center">
            </el-table-column>

            <el-table-column label="状态" prop="status" align="center">

            </el-table-column>
            <el-table-column label="备注" prop="note" align="center">

            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="list.status == 3">
        <el-col :span="12" :offset="8">
          <el-button type="primary" size="default" @click="closeOrder">关闭订单</el-button>
        </el-col>
      </el-row>
      
    </el-card>
    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import buttomBanner from "@/components/buttomBanner";
import {
  orderDetail,
  sendDone,
  finishOrder
} from "@/api/order/orderList/orderDetail/orderDetail.js";
export default {
  data() {
    return {
      list: "",
      item: "",
      tableShowData: [],
      formList: {},
      address:[
        {
          createTime:"2015-03-06 21:16:58",
          status:"深圳市横岗速递营销部已收件",
          note:"揽投员姓名：钟定基;联系电话：13883838888"
        },
        {
          createTime:"2015-03-07 14:25:00",
          status:"离开深圳市 发往广州市",
          note:""
        },
        {
          createTime:"2015-03-08 00:17:00",
          status:"到达 呼和浩特市 处理中心",
          note:""
        },
        {
          createTime:"2015-03-11 09:53:48",
          status:"呼和浩特市邮政速递物流分公司金川揽投部安排投递",
          note:"投递员姓名：安长虹;联系电话：18047140142"
        }
      ],
      options: [
        {
          value: "中国邮政",
          label: "中国邮政",
        },
        {
          value: "韵达物流",
          label: "韵达物流",
        },
        {
          value: "顺风物流",
          label: "顺风物流",
        },
        {
          value: "圆通物流",
          label: "圆通物流",
        },
        {
          value: "申通物流",
          label: "申通物流",
        },
      ],
      rules: {
        deliveryCompany: [
          { required: true, message: "请选择物流公司", trigger: "blur" },
        ],
        deliverySn: [
          { required: true, message: "请填写单号", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    orderTotalPrice() {
      return this.tableShowData.reduce((pre, next) => {
        return pre + next.totalPrice;
      }, 0);
    },
    realAmount() {
      return this.tableShowData.reduce((pre, next) => {
        return pre + next.realAmount;
      }, 0);
    },
  },
  components: {
    buttomBanner,
  },
  methods: {
    closeOrder(){
      this.$confirm("确定要关闭该订单吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          if (res == "confirm") {
            finishOrder(this.item).then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "关闭成功!",
                });
                this.init();
              }
            });
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 立即发货
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var obj = this.formList;
          obj.orderId = this.item;
          sendDone(obj).then((res) => {
            if (res.success) {
              this.init();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    init() {
      orderDetail(this.item).then((res) => {
        if (res.success) {
          this.list = res.data.orderDetail.orderBase;
          this.tableShowData = res.data.orderDetail.orderItems;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.item = JSON.parse(window.localStorage.getItem("orderData")).id;
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.topProcess {
  padding: 20px 0;
  border-bottom: 1px solid #e3e3e3;
}
.orderMesDiv {
  padding: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .orderMesTop-span {
    font-weight: 700;
    font-size: 16px;
    margin-right: 10px;
  }
}
.orderMes {
  padding: 20px 0;
}
.mesBottom {
  padding: 0 0 40px;
  border-bottom: 1px solid #e3e3e3;
}
.img {
  width: 100px;
  height: 100px;
}
</style>